<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="nav-title">发布</view>
    </view>

    <!-- 发布规则提示 -->
    <view class="rule-tip">
      <text class="iconfont icon-info">💡</text>
      <text>这里是发布规则如果没有则删除</text>
      <text class="rule-link">发布规则</text>
    </view>

    <!-- 表单内容 -->
    <form class="form-container">
      <!-- 任务标题 -->
      <view class="form-item">
        <input 
          type="text" 
          placeholder="请输入任务标题" 
          v-model="taskForm.title"
          class="form-input"
        />
      </view>

      <!-- 产品信息区域 -->
      <view class="form-section">
        <view class="form-row">
          <text class="form-label">产品名称</text>
          <input 
            type="text" 
            placeholder="这里是名称" 
            v-model="taskForm.productName"
            class="form-value"
          />
        </view>

        <view class="form-row">
          <text class="form-label">产品类型</text>
          <view class="form-select" @click="showTypePicker = true">
            <view>{{ taskForm.productType }}</view>
            <view class="rule-link1"></view>
          </view>
        </view>

        <view class="form-row">
          <text class="form-label">产品材质</text>
          <input 
            type="text" 
            placeholder="这里是材质" 
            v-model="taskForm.material"
            class="form-value"
          />
        </view>

        <view class="form-row">
          <text class="form-label">产品大小</text>
          <input 
            type="text" 
            placeholder="请填写" 
            v-model="taskForm.size"
            class="form-value"
          />
        </view>

        <view class="form-row">
          <text class="form-label">出模穴数</text>
          <input 
            type="text" 
            placeholder="请填写" 
            v-model="taskForm.cavityNumber"
            class="form-value"
          />
        </view>

        <view class="form-row">
          <text class="form-label">模具类型</text>
          <view class="form-select" @click="showMoldTypePicker = true">
            <text>{{ taskForm.moldType }}</text>
            <view class="rule-link1"></view>
          </view>
        </view>

        <view class="form-row">
          <text class="form-label">流道类型</text>
          <view class="form-select" @click="showRunnerTypePicker = true">
            <text>{{ taskForm.runnerType }}</text>
            <view class="rule-link1"></view>
          </view>
        </view>

        <view class="form-row">
          <text class="form-label">设计标准</text>
          <view class="form-select" @click="showStandardPicker = true">
            <text>{{ taskForm.standard }}</text>
            <view class="rule-link1"></view>
          </view>
        </view>

        <view class="form-row">
          <text class="form-label">模具寿命(万次)</text>
          <input 
            type="text" 
            placeholder="这里是模具寿命" 
            v-model="taskForm.lifeSpan"
            class="form-value"
          />
        </view>
      </view>

      <!-- 报价需求区域 -->
      <view class="form-section">
        <view class="section-title">报价需求</view>

        <view class="form-row">
          <view style="width: 400rpx;">
            <view class="form-label">添加任务</view>
            <view class="form-hint">可组合添加</view>
          </view>
          <view class="form-select" @click="showTaskPicker = true" style="width: 200rpx;">
            <view>{{ taskForm.taskItems.join('、') }}</view>
            <view class="rule-link1"></view>
          </view>
        </view>

        <view class="form-row form-textarea">
          <text class="form-label">任务说明</text>
          <textarea 
            placeholder="这里是任务说明" 
            v-model="taskForm.description"
            class="form-textarea-content"
          ></textarea>
        </view>

        <!-- 产品图片上传 -->
        <view class="upload-section">
          <text class="upload-title">产品图片(限制3张)</text>
          <view class="upload-area">
            <view class="upload-btn" @click="chooseImage" v-if="imageList.length < 3">
              <text class="iconfont icon-add">+</text>
            </view>
            <view class="image-item" v-for="(img, index) in imageList" :key="index">
              <image :src="img" mode="aspectFill" class="uploaded-img"></image>
              <text class="delete-img" @click="deleteImage(index)">✕</text>
            </view>
          </view>
        </view>

        <!-- 附件上传 -->
        <view class="upload-section">
          <text class="upload-title">上传附件</text>
          <view class="upload-area">
            <view class="upload-btn" @click="chooseFile">
              <text class="iconfont icon-add">+</text>
            </view>
            <view class="file-item" v-for="(file, index) in fileList" :key="index">
              <text class="file-name">{{ file.name }}</text>
              <text class="delete-file" @click="deleteFile(index)">✕</text>
            </view>
          </view>
          <text class="upload-hint">说明:上传附件需小于15M,超出请在任务说明里备注下载地址</text>
        </view>

        <view class="form-row">
          <text class="form-label">报价人数(人)</text>
          <view class="form-select" @click="showQuotaPicker = true" >
            <text>{{ taskForm.quotationQuota }}</text>
            <view class="rule-link1"></view>
          </view>
        </view>

        <view class="form-row">
          <view >
            <view class="form-label" style="width: 300rpx;">任务完成时间</view>
            <view class="form-hint">任务截止日期</view>
          </view>
          <view class="form-select" @click="showDeadlinePicker = true">
            <text>{{ taskForm.deadline }}</text>
          </view>
          
        </view>

        <view class="form-row">
          <text class="form-label">是否加急</text>
          <view class="form-select" @click="showUrgentPicker = true">
            <text>{{ taskForm.isUrgent ? '是' : '否' }}</text>
            <view class="rule-link1"></view>
          </view>
        </view>
      </view>

      <!-- 发布按钮 -->
      <button class="submit-btn" @click="submitForm">发布</button>
    </form>

    <!-- 选择器弹窗 (实际项目中可使用uni的picker组件) -->
    <uni-picker 
      v-if="showTypePicker"
      :range="productTypeList"
      @confirm="onTypeConfirm"
      @cancel="showTypePicker = false"
    ></uni-picker>
    <!-- 其他选择器类似，省略 -->
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';

// 路由实例
const router = useRouter();

// 表单数据
const taskForm = reactive({
  title: '',
  productName: '',
  productType: '外观件',
  material: '',
  size: '',
  cavityNumber: '',
  moldType: '单色',
  runnerType: '热流道',
  standard: '国内',
  lifeSpan: '',
  taskItems: ['DFMBOM'],
  description: '',
  quotationQuota: 10,
  deadline: '2025-08-10 12:00:00',
  isUrgent: false
});

// 图片和文件列表
const imageList = ref([]);
const fileList = ref([]);

// 选择器显示状态
const showTypePicker = ref(false);
const showMoldTypePicker = ref(false);
const showRunnerTypePicker = ref(false);
const showStandardPicker = ref(false);
const showTaskPicker = ref(false);
const showQuotaPicker = ref(false);
const showDeadlinePicker = ref(false);
const showUrgentPicker = ref(false);

// 选择器数据
const productTypeList = ['外观件', '结构件', '电子件', '其他'];
const moldTypeList = ['单色', '双色', '多色'];
const runnerTypeList = ['热流道', '冷流道'];
const standardList = ['国内', '国际', '自定义'];
const taskTypeList = ['DFM、BOM', '3D图', '2D图', '其他'];

// 当前选中的标签页
const currentTab = ref(1);

// 方法：选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - imageList.value.length,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      imageList.value = [...imageList.value, ...res.tempFilePaths];
    }
  });
};

// 方法：删除图片
const deleteImage = (index) => {
  imageList.value.splice(index, 1);
};

// 方法：选择文件
const chooseFile = () => {
  uni.chooseFile({
    count: 1,
    type: 'all',
    success: (res) => {
      // 简单判断文件大小
      if (res.tempFiles[0].size > 15 * 1024 * 1024) {
        uni.showToast({
          title: '文件大小不能超过15M',
          icon: 'none'
        });
        return;
      }
      fileList.value.push(res.tempFiles[0]);
    }
  });
};

// 方法：删除文件
const deleteFile = (index) => {
  fileList.value.splice(index, 1);
};

// 方法：提交表单
const submitForm = () => {
  // 表单验证
  if (!taskForm.title) {
    uni.showToast({
      title: '请输入任务标题',
      icon: 'none'
    });
    return;
  }

  // 构建提交数据
  const formData = {
    ...taskForm,
    images: imageList.value,
    files: fileList.value
  };

  // 这里添加提交到服务器的逻辑
  console.log('提交表单数据:', formData);
  
  uni.showLoading({
    title: '发布中...'
  });

  // 模拟接口请求
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '发布成功',
      icon: 'success'
    });
    router.back();
  }, 1500);
};

// 选择器确认事件 (示例)
const onTypeConfirm = (e) => {
  taskForm.productType = productTypeList[e.detail.value];
  showTypePicker.value = false;
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 100rpx;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  /* background-color: #e6f7f0; */
  background: linear-gradient(0deg, #F7F9FB, #F7F9FB), linear-gradient(0deg, #FAFAFA, #FAFAFA), #FFFFFF;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
}

.nav-right {
  display: flex;
  gap: 16px;
}

.rule-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: #f0f7f4;
  font-size: 14px;
  color: #333;
}

.rule-link {
  color: #00b42a;
  margin-left: auto;
}

.rule-link::after {
  content: ">";
  margin-left: 5rpx;
}

.rule-link1 {
  color: #D9DCE1;
  margin-left: 30rpx;
}
.rule-link1::after {
  content: ">";
  margin-left: 0;
}

.form-container {
  flex: 1;
  padding: 16px;
}

.form-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.form-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 0 16px;
  margin-bottom: 16px;
}

.form-input {
  width: 100%;
  height: 50px;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}

.form-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.form-row:last-child {
  border-bottom: none;
}

.form-label {
  width: 30%;
  font-size: 15px;
  color: #666;
}

.form-value {
  flex: 1;
  font-size: 15px;
  text-align: right;
  color: #333;
}

.form-select {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 15px;
  color: #333;
}

.form-hint {
  color: #999;
}

.form-textarea {
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 0;
}

.form-textarea-content {
  width: 100%;
  min-height: 100px;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.upload-section {
  margin: 16px 0;
}

.upload-title {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  color: #666;
}

.upload-area {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.upload-btn {
  width: 80px;
  height: 80px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #999;
}

.image-item {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.uploaded-img {
  width: 100%;
  height: 100%;
}

.delete-img {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background-color: #ff3b30;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.file-item {
  width: 80px;
  height: 80px;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.file-name {
  font-size: 12px;
  color: #666;
  text-align: center;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-file {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background-color: #ff3b30;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.upload-hint {
  font-size: 12px;
  color: #999;
}

.submit-btn {
  width: 100%;
  height: 50px;
  background-color: #00b42a;
  color: white;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
}

</style>
